<template>
  <div class="env_box">
    <p style="font-size: 22px;color: #121212;text-align: center;font-weight: 550">集训队环境介绍</p>
    <p style="font-size: 16px;color: #121212;text-align: center;line-height: 40px">模拟企业开发环境 提供完善的开发设施</p>

    <div style="margin-top: 30px">
      <div v-for="(t,index) in textList" :key="index">
        <div class="img_box">
          <div class="mask"></div>
          <div class="img_text">{{ t.title }}</div>
          <img :src="t.src" style="width: 100%" alt="">
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: "EnvironmentalPhotos",
  data() {
    return {
      textList: [
        {
          title: '工作室-日常开发环境',
          src: 'https://xk857.com/blog/2021/01/t1.png'
        }, {
          title: '会议室-开会讨论事项',
          src: 'https://xk857.com/blog/2021/01/t2.png'
        }, {
          title: '工作室-另一个角度',
          src: 'https://xk857.com/blog/2021/01/t3.png'
        }, {
          title: '教授在会议室现场指导',
          src: 'https://xk857.com/blog/2021/01/t4.jpg'
        }, {
          title: '集训队学长传授编程经验',
          src: 'https://xk857.com/blog/2021/01/t5.jpg'
        }
      ]
    }
  }
}
</script>

<style scoped>
@font-face {
  font-family: circle;
  src: url('../../assets/font/circle.ttf');
  font-weight: normal;
  font-style: normal;
}

.env_box {
  background: #F8FAFC;
  padding: 20px 30px;

}

.mask {
  top: -16px;
  position: absolute;
  width: 78%;
  height: 0;
  border-width: 0 20px 30px 20px;
  border-style: none solid solid;
  border-color: transparent transparent #CDDFFF;
  left: 33px;

}

.img_box {
  background: #DEE9FF;
  padding: 15px;
  position: relative;
  margin-bottom: 40px;
  border-radius: 10px;
}

.img_text {
  font-family: circle;
  color: #3e52ff;
  position: absolute;
  width: 100%;
  text-align: center;
  top: -12px;
  left: 0;
  font-weight: 600;
  font-size: 14px;
}


</style>
